<template>
	<view style="padding:10px;color: #333;font-weight: 500;">
		<view style="padding: 10px 0"><text>1、设置单选和父级不可选</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini"
			@click="itemclick(false, false)">设置</button>
		<view style="padding: 10px 0"><text>2、设置多选和父级不可选</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini"
			@click="itemclick(true, false)">设置</button>
		<view style="padding: 10px 0"><text>3、设置单选和父级可选</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini"
			@click="itemclick(false, true)">设置</button>
		<view style="padding: 10px 0"><text>4、设置多选和父级可选</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini"
			@click="itemclick(true, true)">设置</button>
		<view style="padding: 10px 0"><text>4、设置多选和父级可选和父级关联子级选择</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini"
			@click="itemclick(true, true, true)">设置</button>
		<view style="padding: 10px 0"><text>5、设置默认回显(默认选中: '上海-2', '黄埔区-35')</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="echoDefault()">设置</button>
		<!-- 异步加载demo -->
		<view style="padding: 10px 0"><text>6、异步加载渲染demo</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="openTree()">设置</button>
		
	</view>

	<!-- 异步加载demo -->
	<!-- <next-tree :selectParent="false" :checkStrictly="true" funcMode="checkbox" ref="nextTreeAsyncRef" :treeData="asyncTreeData" :loadData="loadData" /> -->

	<next-tree :expandedKeys="['3','3-1']" :changeVerify="changeVerify" title="getTitle" ref="nextTreeRef"
		:checkStrictly="checkStrictly" :selectParent="selectParent" :funcMode="funcMode" :treeData="treeData"
		@cancel="oncancel" @confirm="onconfirm">
		<!-- label插槽示意代码 -->
		<template #label="{data: {id, label, iconSrc, prev, post}}">
			<view class="line-block">
				<image class="img" v-if="iconSrc" :src="iconSrc"></image>
				<text space="nbsp" v-if="prev">{{prev}}&nbsp;</text><text>{{label}}</text><text space="nbsp"
					v-if="post">&nbsp;{{post}}</text>
			</view>
		</template>
	</next-tree>
</template>
<script setup lang="ts">
	import { ref, unref } from 'vue'
	// import nextTree from '@/components/next-tree/next-tree.vue'

	const funcMode = ref('radio');
	const selectParent = ref(false)
	const nextTreeRef = ref()
	const nextTreeAsyncRef = ref()
	const activeId = ref('')

	const localData : any = {
		'a1': [{ id: 'a1-1', label: 'a1-1' }, { id: 'a1-2', label: 'a1-2', children: [] }, { id: 'a1-3', label: 'a1-3' }],
		'b1': [{ id: 'b1-1', label: 'b1-1', children: [] }, { id: 'b1-2', label: 'b1-2' }, { id: 'b1-3', label: 'b1-3' }],
		'c1': [{ id: 'c1-1', label: 'c1-1' }, { id: 'c1-2', label: 'c1-2' }, { id: 'c1-3', label: 'c1-3', children: [] }],
		'a1-2': [{ id: 'a1-2-1', label: 'a1-2-1' }, { id: 'a1-2-2', label: 'a1-2-2' }],
		'b1-1': [{ id: 'b1-1-1', label: 'b1-1-1' }, { id: 'b1-1-2', label: 'b1-1-2' }],
		'c1-3': [{ id: 'c1-3-1', label: 'c1-3-1' }, { id: 'c1-3-2', label: 'c1-3-2' }]
	}

	const checkStrictly = ref(false)
	const asyncTreeData = ref([{ id: 'a1', label: 'a1', children: [] }, { id: 'b1', label: 'b1', children: [] }, { id: 'c1', label: 'c1', children: [] }])
	const treeData = ref([
		{ id: '1', label: '北京' },
		{

			id: '2', label: '上海', children: [
				{ id: '2-1', label: '上海-1' },
				{ id: '2-2', label: '上海-2' },
				{ id: '2-3', label: '上海-3' },
			]

		},
		{

			id: '3', label: '广州', children: [
				{

					id: '3-1', label: '海珠区', children: [
						{ id: '3-1-1', label: '海珠区-1' },
						{ id: '3-1-2', label: '海珠区-2' },
						{ id: '3-1-4', label: '海珠区-3' },
						{ id: '3-1-5', label: '海珠区-4' },
						{ id: '3-1-6', label: '海珠区-5' },
						{ id: '3-1-7', label: '海珠区-6' },
						{ id: '3-1-8', label: '海珠区-7' },
						{ id: '3-1-9', label: '海珠区-8' },
						{ id: '3-1-10', label: '海珠区-9' },
						{ id: '3-1-11', label: '海珠区-10' },
					]

				},
				{

					id: '3-2', label: '番禺区', children: [
						{ id: '3-2-1', label: '番禺区-1' },
						{ id: '3-2-2', label: '番禺区-2' },
						{ id: '3-2-4', label: '番禺区-3', children: null },    // 注意： 当childrenKey的值设为null，代表无子节点的父节点
						{ id: '3-2-5', label: '番禺区-4' },
						{ id: '3-2-6', label: '番禺区-5' },
						{ id: '3-2-7', label: '番禺区-6' },
						{ id: '3-2-8', label: '番禺区-7' },
						{ id: '3-2-9', label: '番禺区-8' },
						{ id: '3-2-10', label: '番禺区-9' },
						{ id: '3-2-11', label: '番禺区-10' },
					]

				},
				{

					id: '3-3', label: '黄埔区', children: [
						{ id: '3-3-1', label: '黄埔区-1' },
						{ id: '3-3-2', label: '黄埔区-2' },
						{ id: '3-3-3', label: '黄埔区-3' },
						{ id: '3-3-4', label: '黄埔区-4' },
						{ id: '3-3-5', label: '黄埔区-5' },
						{ id: '3-3-6', label: '黄埔区-6' },
						{ id: '3-3-7', label: '黄埔区-7' },
						{ id: '3-3-8', label: '黄埔区-8' },
						{ id: '3-3-9', label: '黄埔区-9' },
						{ id: '3-3-10', label: '黄埔区-10' },
						{ id: '3-3-12', label: '黄埔区-11' },
						{ id: '3-3-13', label: '黄埔区-12' },
						{ id: '3-3-13', label: '黄埔区-13' },
						{ id: '3-3-14', label: '黄埔区-14' },
						{ id: '3-3-15', label: '黄埔区-15' },
						{ id: '3-3-16', label: '黄埔区-16' },
						{ id: '3-3-17', label: '黄埔区-17' },
						{ id: '3-3-18', label: '黄埔区-18' },
						{ id: '3-3-19', label: '黄埔区-19' },
						{ id: '3-3-20', label: '黄埔区-20' },
						{ id: '3-3-21', label: '黄埔区-21' },
						{ id: '3-3-22', label: '黄埔区-22' },
						{ id: '3-3-23', label: '黄埔区-23' },
						{ id: '3-3-24', label: '黄埔区-24' },
						{ id: '3-3-25', label: '黄埔区-25' },
						{ id: '3-3-26', label: '黄埔区-26' },
						{ id: '3-3-27', label: '黄埔区-27' },
						{ id: '3-3-28', label: '黄埔区-28' },
						{ id: '3-3-29', label: '黄埔区-29' },
						{ id: '3-3-30', label: '黄埔区-30' },
						{ id: '3-3-31', label: '黄埔区-31' },
						{ id: '3-3-32', label: '黄埔区-32' },
						{ id: '3-3-33', label: '黄埔区-33' },
						{ id: '3-3-34', label: '黄埔区-34' },
						{ id: '3-3-35', label: '黄埔区-35' },
						{ id: '3-3-36', label: '黄埔区-36' },

					]

				},
			],
		}])
	function getTitle(checked) {
		return `已选：${checked.length}项`
	}
	function itemclick(_multiple, _selectParent, _checkStrictly = false) {
		funcMode.value = _multiple ? 'checkbox' : 'radio';
		selectParent.value = _selectParent
		checkStrictly.value = _checkStrictly
		unref(nextTreeRef).showTree = true
	}
	function checkedFunc(id) {
		if (unref(activeId) === id) {
			activeId.value = '';
			unref(nextTreeRef).checkedFunc(id, false)
		} else {
			activeId.value = id;
			unref(nextTreeRef).checkedFunc(id)
		}
	}
	function changeVerify(current, chooseList) {
		// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
		// 如果函数体不做return返回值，即验证通过，控件正常处理业务
		console.log('当前变化的数据', current)
		console.log('已选择的数据', chooseList)
		if (chooseList && chooseList.length > 4) {

			return '最多可以选择4个节点'
		}
	}
	function openTree() {
		unref(nextTreeAsyncRef).showTree = true
	}
	function echoDefault() {
		const selectIds = ['2-1', '3-3-35']
		checkedTreeData(unref(treeData), selectIds)
		console.log('treeData的数据：', unref(treeData))
		funcMode.value = 'checkbox'
		unref(nextTreeRef).showTree = true
	}
	function loadData(data) {
		const type = data.$type;    // 加载类型
		const source = data.source // 源数据
		// 同步实现的代码处理方式

		if (type === 'nodeLoad') {
			const nodeItem = source;
			// 同步实现的代码处理方式
			// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}

			// if(nodeItem && localData[nodeItem.id]) {
			//     return localData[nodeItem.id]
			// } else {
			//     return []
			// }

			// 异步的代码实现方式
			// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}

			return new Promise((resolve, reject) => {
				setTimeout(() => {
					if (nodeItem && localData[nodeItem.id]) {
						return resolve(localData[nodeItem.id])
					} else {
						return resolve([])
					}
				}, 1000)
			})
		} else if (type === 'remoteSearch') {
			// ...doing
		}

	}

	function checkedTreeData(treeData, selectIds) {
		treeData.map(item => {
			if (selectIds.indexOf(item.id) !== -1) {
				item.checked = true
			} else {
				item.checked = false
			}
			if (item.children && item.children.length) {
				checkedTreeData(item.children, selectIds)
			}
		})
	}
	function oncancel() {
		// 清除treeData的选中状态
		checkedTreeData(unref(treeData), [])
	}
	function onconfirm(list) {
		console.log('选中项的数量列表list：', list)
	}
</script>
<style lang="scss">
	.line-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
</style>